<template>
  <div class="payment_status">
    <div class="status_top">
      <van-icon :name="statusIcon" :class="statusClass"/>
      <div>{{statusText}}</div>
    </div>

    <div class="status_text" v-if="isSuccess">
      <span class="red">3秒</span>跳转订单
    </div>
    <div class="status_text" v-else>系统繁忙, 支付遇到问题, 请您稍后再试!</div>

    <div class="status_goLink">
      <span class="red" @click="toUserCenter">查看订单
        <van-icon name="arrow"/>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'payment-status',

  props: {
    status: String
  },
  data() {
    return {
      isSuccess: true,
      overtimer: null,
    }
  },
  created() {
    const that = this
    this.overtimer = setTimeout(()=>{
       this.$router.push({ path: '/user/order/list/0' });
    },3000)
  },
  methods: {
    toUserCenter(){
      clearTimeout(this.overtimer);
      this.overtimer = null;
      this.$router.push(`/user/order/list/0`);
    }
  },
  computed: {
    statusText() {
      return this.isSuccess ? '支付成功' : '支付失败';
    },
    statusIcon() {
      return this.isSuccess ? 'checked' : 'fail';
    },
    statusClass() {
      return this.isSuccess ? 'success_icon' : 'fail_icon';
    }
  },

  activated() {
    this.isSuccess = this.status === 'success';
  }
};
</script>


<style lang="scss" scopd>
.payment_status {
  padding-top: 30px;
  box-sizing: border-box;
  background-color: #fff;
  text-align: center;
}

.status_top {
  margin-bottom: 15px;
  i {
    margin-bottom: 5px;
  }
  > div {
    font-size: 18px;
  }
}

.status_text {
  color: $font-color-gray;
  margin-bottom: 50px;
}

.status_icon {
  font-size: 80px;
}

i.success_icon {
  @extend .status_icon;
  color: #06bf04;
}

i.fail_icon {
  @extend .status_icon;
  color: #f44;
}
</style>
